<script setup>
import { ref, computed } from 'vue'
import { dayjs } from 'element-plus'
import {
  getBusinessDataService,
  getBusinessStatusDataService,
  getProjectStatusDataService,
  getItemStatusDataService
} from '@/api/workspace.js'
import { useRouter } from 'vue-router'

const router = useRouter()

const businessData = ref({
  turnover: null, // 今日营业额
  totalBusinessCount: null, // 今日业务总数
  validBusinessCount: null, // 今日有效业务数
  businessCompletionRate: null, // 今日业务完成率
  newMemberCount: null, // 今日新增会员数
  activeMemberCount: null // 今日活跃会员数
})

const businessStatusData = ref({
  unacceptedBusinessCount: null, // 待接单业务数
  onServiceBusinessCount: null, // 正在服务业务数
  completedBusinessCount: null, // 已完成业务数
  refundedBusinessCount: null, // 已退款业务数
  totalBusinessCount: null // 总业务数
})

const projectStatusData = ref({
  enabledProjectCount: null, // 已启用的服务项目数量
  disabledProjectCount: null // 已禁用的服务项目数量
})

const itemStatusData = ref({
  enabledItemCount: null, // 已启用的物品数量
  disabledItemCount: null // 已禁用的物品数量
})

const getWorkspaceData = async () => {
  let res = await getBusinessDataService()
  businessData.value = res.data.data
  res = await getBusinessStatusDataService()
  businessStatusData.value = res.data.data
  res = await getProjectStatusDataService()
  projectStatusData.value = res.data.data
  res = await getItemStatusDataService()
  itemStatusData.value = res.data.data
}
getWorkspaceData()

// 计算今日日期
const todayDate = computed(() => {
  const date = new Date()
  return dayjs(date).format('YYYY.MM.DD')
})

// 计算今日开始时间
const todayBeginTime = computed(() => {
  const date = new Date()
  return dayjs(date).format('YYYY-MM-DD 00:00:00')
})

// 显示今日业务详情
const showTodayBusiness = (status) => {
  const businessQuery = {
    startTime: todayBeginTime.value
  }
  if (status) {
    businessQuery.businessStatus = status
  }
  router.push({
    path: '/business',
    query: businessQuery
  })
}

// 显示服务项目详情
const showProject = (status) => {
  const projectQuery = {}
  if (status) {
    projectQuery.status = status
  }
  router.push({
    path: '/project',
    query: projectQuery
  })
}

// 显示物品详情
const showItem = (status) => {
  const itemQuery = {}
  if (status) {
    itemQuery.status = status
  }
  router.push({
    path: '/item',
    query: itemQuery
  })
}
</script>

<template>
  <el-container>
    <el-main>
      <!-- 今日业务数据 -->
      <el-row>
        <el-col :span="24">
          <el-card class="section-card" shadow="hover">
            <template #header>
              <span class="section-title">今日数据总览</span>
              <span class="local-date">{{ todayDate }}</span>
            </template>
            <el-row :gutter="20">
              <el-col class="business-data-col">
                <el-card class="data-card" shadow="hover">
                  <div class="data-title">营业额</div>
                  <div class="data-value">¥{{ (businessData.turnover / 100).toFixed(2) }}</div>
                </el-card>
              </el-col>
              <el-col class="business-data-col">
                <el-card class="data-card" shadow="hover">
                  <div class="data-title">业务总数</div>
                  <div class="data-value">{{ businessData.totalBusinessCount }}</div>
                </el-card>
              </el-col>
              <el-col class="business-data-col">
                <el-card class="data-card" shadow="hover">
                  <div class="data-title">有效业务数</div>
                  <div class="data-value">{{ businessData.validBusinessCount }}</div>
                </el-card>
              </el-col>
              <el-col class="business-data-col">
                <el-card class="data-card" shadow="hover">
                  <div class="data-title">业务完成率</div>
                  <div class="data-value">
                    {{ (businessData.businessCompletionRate * 100).toFixed(2) + '%' }}
                  </div>
                </el-card>
              </el-col>
              <el-col class="business-data-col">
                <el-card class="data-card" shadow="hover">
                  <div class="data-title">新增会员数</div>
                  <div class="data-value">{{ businessData.newMemberCount }}</div>
                </el-card>
              </el-col>
              <el-col class="business-data-col">
                <el-card class="data-card" shadow="hover">
                  <div class="data-title">活跃会员数</div>
                  <div class="data-value">{{ businessData.activeMemberCount }}</div>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>

      <!-- 今日业务状态 -->
      <el-row class="mt-20">
        <el-col :span="24">
          <el-card class="section-card" shadow="hover">
            <template #header>
              <span class="section-title">今日业务状态</span>
              <span class="local-date">{{ todayDate }}</span>
              <span class="detail-link" @click="showTodayBusiness()">今日业务详情＞</span>
            </template>
            <el-row :gutter="20">
              <el-col class="business-status-data-col">
                <el-card
                  class="data-card"
                  shadow="hover"
                  style="cursor: pointer"
                  @click="showTodayBusiness('待接单')"
                >
                  <div class="inline-data-title" style="color: red">
                    <span class="iconfont icon-unaccepted">待接单</span>
                  </div>
                  <div class="inline-data-value" style="color: red">
                    {{ businessStatusData.unacceptedBusinessCount }}
                  </div>
                </el-card>
              </el-col>
              <el-col class="business-status-data-col">
                <el-card
                  class="data-card"
                  shadow="hover"
                  style="cursor: pointer"
                  @click="showTodayBusiness('进行中')"
                >
                  <div class="inline-data-title">
                    <span class="iconfont icon-on_service">进行中</span>
                  </div>
                  <div class="inline-data-value">
                    {{ businessStatusData.onServiceBusinessCount }}
                  </div>
                </el-card>
              </el-col>
              <el-col class="business-status-data-col">
                <el-card
                  class="data-card"
                  shadow="hover"
                  style="cursor: pointer"
                  @click="showTodayBusiness('已完成')"
                >
                  <div class="inline-data-title">
                    <span class="iconfont icon-completed">已完成</span>
                  </div>
                  <div class="inline-data-value">
                    {{ businessStatusData.completedBusinessCount }}
                  </div>
                </el-card>
              </el-col>
              <el-col class="business-status-data-col">
                <el-card
                  class="data-card"
                  shadow="hover"
                  style="cursor: pointer"
                  @click="showTodayBusiness('已退款')"
                >
                  <div class="inline-data-title" style="color: red">
                    <span class="iconfont icon-refunded">已退款</span>
                  </div>
                  <div class="inline-data-value" style="color: red">
                    {{ businessStatusData.refundedBusinessCount }}
                  </div>
                </el-card>
              </el-col>
              <el-col class="business-status-data-col">
                <el-card class="data-card" shadow="hover">
                  <div class="inline-data-title">
                    <span class="iconfont icon-total_business">业务总数</span>
                  </div>
                  <div class="inline-data-value">{{ businessStatusData.totalBusinessCount }}</div>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="mt-20">
        <!-- 服务项目状态数据 -->
        <el-col :span="12">
          <el-card class="section-card" shadow="hover">
            <template #header>
              <span class="section-title">服务项目状态</span>
              <span class="detail-link" @click="showProject()">服务项目管理＞</span>
            </template>
            <el-row :gutter="20">
              <el-col class="project-item-data-col">
                <el-card
                  class="data-card"
                  shadow="hover"
                  style="cursor: pointer"
                  @click="showProject('启用')"
                >
                  <div class="inline-data-title">
                    <span class="iconfont icon-enabled">已启用</span>
                  </div>
                  <div class="inline-data-value">
                    {{ projectStatusData.enabledProjectCount }}
                  </div>
                </el-card>
              </el-col>
              <el-col class="project-item-data-col">
                <el-card
                  class="data-card"
                  shadow="hover"
                  style="cursor: pointer"
                  @click="showProject('禁用')"
                >
                  <div class="inline-data-title" style="color: red">
                    <span class="iconfont icon-disabled">已禁用</span>
                  </div>
                  <div class="inline-data-value" style="color: red">
                    {{ projectStatusData.disabledProjectCount }}
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <!-- 物品状态数据 -->
        <el-col :span="12">
          <el-card class="section-card" shadow="hover">
            <template #header>
              <span class="section-title">物品状态</span>
              <span class="detail-link" @click="showItem()">物品管理＞</span>
            </template>
            <el-row :gutter="50">
              <el-col class="project-item-data-col">
                <el-card
                  class="data-card"
                  shadow="hover"
                  style="cursor: pointer"
                  @click="showItem('启用')"
                >
                  <div class="inline-data-title">
                    <span class="iconfont icon-enabled">已启用</span>
                  </div>
                  <div class="inline-data-value">
                    {{ itemStatusData.enabledItemCount }}
                  </div>
                </el-card>
              </el-col>
              <el-col class="project-item-data-col">
                <el-card
                  class="data-card"
                  shadow="hover"
                  style="cursor: pointer"
                  @click="showItem('禁用')"
                >
                  <div class="inline-data-title" style="color: red">
                    <span class="iconfont icon-disabled">已禁用</span>
                  </div>
                  <div class="inline-data-value" style="color: red">
                    {{ itemStatusData.disabledItemCount }}
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<style lang="scss" scoped>
.el-main {
  padding: 0;
  overflow-x: hidden;
}

.section-card {
  border-radius: 10px;
  margin-bottom: 10px;

  .business-data-col {
    flex: 1 0 15%;
    min-width: 180px;
  }

  .business-status-data-col {
    flex: 1 0 18%;
    min-width: 200px;
  }

  .project-item-data-col {
    flex: 1 0 48%;
    min-width: 200px;
  }
}

.section-title {
  font-size: 18px;
  color: #000;
  font-weight: 700;
}

.local-date {
  margin-left: 20px;
  color: #333;
}

.detail-link {
  float: right;
  cursor: pointer;
}

.data-card {
  border-radius: 10px;
  text-align: center;
  padding: 20px;
  transition: transform 0.2s;
  background-color: #f7fafc;

  &:hover {
    transform: translateY(-3px);
  }

  .data-title {
    font-size: 18px;
    color: #333;
    margin-bottom: 8px;
  }

  .data-value {
    font-size: 26px;
    font-weight: 700;
    color: #000;
  }

  .inline-data-title {
    font-size: 18px;
    color: #333;
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
  }

  .inline-data-value {
    font-size: 25px;
    font-weight: 700;
    color: #000;
    display: inline-block;
    vertical-align: middle;
  }
}

.mt-20 {
  margin-top: 20px;
}
</style>
